<!-- FloatingBackButton.vue -->
<template>
    <div class="floating-back-button" @click="goToHome">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
        <!-- 这里是返回箭头的SVG路径 -->
        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
      </svg>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import router from '../../router/index.js'
  
  export default defineComponent({
    name: 'FloatingBackButton',
    methods: {
      goToHome() {
        // const router = useRouter();
        // router.push('/riskdec');
        router.go(-1);
      },
    },
  });
  </script>
  
  <style scoped>
  .floating-back-button {
    position: fixed;
    bottom: 100px;
    right: 100px;
    width: 80px;
    height: 80px;
    background-color: #3a73d3; /* 自定义背景颜色 */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保悬浮按钮在所有内容之上 */
  
    svg {
      fill: #ffffff; /* 自定义图标填充颜色 */
      transition: fill 0.3s ease;
      &:hover {
        fill: #000000; /* 鼠标悬停时的填充颜色 */
      }
    }
  }
  </style>